<template>
  <div class="mb-5">
    <router-link :to="{ name: 'person', params: { id: person.id } }">
      <div
        class="bg-secondary p-1 aspect-[10/16] transition duration-300 hover:scale-105 z-10"
      >
        <UseImage
          :src="poster"
          width="200"
          height="600"
          class="size-full object-cover"
          :alt="person.name"
        >
          <template #loading>
            <div class="flex items-center justify-center size-full">
              <RiLoaderLine class="size-8 animate-spin" />
            </div>
          </template>

          <template #error>
            <div class="flex items-center justify-center size-full">
              <RiFileImageLine class="size-9" />
            </div>
          </template>
        </UseImage>
      </div>

      <h2 class="mt-[10px] text-[13px] xl:mb-[5px] xl:text-[15px]">
        {{ person.name }}
      </h2>

      <div class="text-xs text-grey xl:text-sm">
        {{ person.character }}
      </div>
    </router-link>
  </div>
</template>
<script setup>
import {computed} from "vue";
import { UseImage } from "@vueuse/components";
import { RiFileImageLine, RiLoaderLine } from "vue-icons-plus/ri";

import { apiImgUrl } from "@/api";

const { person } = defineProps({
  person: {
    type: Object,
    required: true,
  },
});

const poster = computed(() => {
  if (person.profile_path) {
    return `${apiImgUrl}/w370_and_h556_bestv2${person.profile_path}`;
  } else {
    return null;
  }
});
</script>
